<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      lang="zh-cn">
<head>
    <meta content="云之讯,云通讯,云通讯平台" name="keywords"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>短信云平台运营系统 </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link th:href="@{/resources/css/bootstrap.min14ed.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{/resources/css/font-awesome.min93e3.css?v=4.4.0}" rel="stylesheet"><!-- jqgrid-->
    <link th:href="@{/resources/js/plugins/jqgrid/css/ui.jqgrid-bootstrap.css}" rel="stylesheet">
    <link th:href="@{/resources/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/resources/css/style.min862f.css?v=4.1.0}" rel="stylesheet">
    <link th:href="@{/resources/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
    <link th:href="@{/resources/css/doublebox-bootstrap.css}" rel="stylesheet">

    <style>
        /* Additional style to fix warning dialog position */
        #alertmod_table_list_2 {
            top: 900px !important;
        }
        .ue-container {
            margin: 0 auto;
            margin-top: 3%;
            padding: 20px 40px;
            border: 1px solid #ddd;
            background: #fff;
        }
        /*.bootstrap-duallistbox-container .btn-box{*/
        /*margin-top: 39px !important;*/
        /*}*/
        .modal-content{
            opacity: 1 !important;
            border:none;
        }
        .bootstrap-duallistbox-container label{
            text-align: center;
        }
        .filter{
            text-align: center;
        }
        .demo{
            height: 322px !important;
        }
        .box1,.box2 {
            padding-left: 52px !important;
            width:300px !important;
        }
        .btn-box{
            margin-left: 22px !important;
        }
    </style>
</head>
<body class="gray-bg"><div th:replace="stat :: statCode"></div>
<div class="wrapper wrapper-content  animated fadeInRight">

        <div class="modal-dialog" role="document" style="width:900px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel" style="text-align: center">【<span id="clientId"  style="color: #003399;"></span>-<span id="clientName" style="color: #003399;"></span>】&nbsp;&nbsp;&nbsp;子账户管理</h4>
                </div>
                <div class="modal-body" >
                    <div class="ue-container">
                        <select multiple="multiple" size="100" name="doublebox" class="demo"></select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submit">确定</button>
                    <button type="button" class="btn btn-default" id="cancel" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
</div>
<script th:src="@{/resources/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/resources/js/bootstrap.min.js?v=3.3.6}"></script>
<script th:src="@{/resources/js/content.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/plugins/layer/laydate/laydate.js}"></script>
<script th:src="@{/resources/js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/i18n/grid.locale-cn.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/jquery.jqGrid.min.js}"></script>
<script th:src="@{/resources/js/date_format.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/resources/js/common.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/layer/layer.js}"></script>
<script th:src="@{/resources/js/doublebox-bootstrap.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/


$(function () {
    var clientid = getQueryString("clientid");
    var name = getQueryString("name");

    // 管理子账户
    $("#clientId").text(clientid);
    $("#clientName").text(name);
    var list = [];
    var bindingList = [];
    $.ajax({
        url:/*[[@{/accountInfo/query/subAccount}]]*/,
        type:"POST",
        data:{clientid:clientid},
        success:function(data){
            list = data.list;
            bindingList = data.bindingList;
            $('.demo').doublebox({
                nonSelectedListLabel: '未绑定子账户',
                selectedListLabel: '已绑定子账户',
                preserveSelectionOnMove: 'moved',
                moveOnSelect: false,
                nonSelectedList:list,
                selectedList:bindingList,
                optionValue:"clientid",
                optionText:"name",
                doubleMove:true
            });
            $(".filter").attr('placeholder','搜索')
            $(".moveall").remove();
            $(".removeall").remove()
            $(".upBtn").remove()
            $(".downBtn").remove()
        }


    })
})

    function getSelectedOptions() {
        var items = $("#bootstrap-duallistbox-selected-list_doublebox>option")
            .map(function() {
                return $(this).val();
            })
            .get()
            .join(",")
            .split(",");
        return items;
    };

    $("#submit").click(function () {
        var clientid = getSelectedOptions();
        var list = [];
        for(var i = 0 ; i<clientid.length;i++){
            var obj = {};
            obj.clientid = clientid[i];
            list.push(obj);
        }
        $.ajax({
            url:/*[[@{/accountInfo/saveSubAccount}]]*/,
            type:"POST",
            data:{list:list,clientid:$("#clientId").text()},
            success:function(data) {
                if(data.code == 200){
                    layer.msg(data.msg, {icon: 1,time:1500},function () {
                        parent.layer.closeAll()
                    });
                }else {
                    layer.msg(data.msg, {icon: 2});

                }

            }
        });
    });
    $("#cancel").click(function () {
        parent.layer.closeAll()

    })
    /*]]>*/
</script>
</body>
</html>